<template>
	<view>
		<!-- 顶部导航 -->
		<view class="u-p-l-20 u-p-r-20 u-p-b-20 u-p-t-10">
			<fa-search :mode="2" :no-focus="true" radius="16" @focus="goPage('/pages/search/search')"></fa-search>
		</view>
		
		<view style="padding: 20rpx 32rpx;">
			<u-swiper :list="vuex_config.swiper" border-radius="16" :title="true" :height="210" @click="openPage"></u-swiper>
		</view>

		<view class="index-content hots-list-box">
			<view class="z-title">
				<text class="le">热门商品</text>
        <navigator url="/pages/goods/goods" class="more">查看更多 <u-icon name="arrow-right" color=""></u-icon></navigator>
			</view>
			<view class="hots-list">
				<view class="item" v-for="(item, index) in hots" :key="index" @click="goPage('/pages/goods/detail?id=' + item.id)">
					<view class="images"><image :src="item.image" mode="aspectFill"></image></view>
					<view class="content">
						<view class="name u-line-1">{{ item.title }}</view>
						<view class="price">
							<text>￥{{ item.price }}</text>
						</view>
					</view>
				</view>
				<!-- 空数据 -->
				<view class="u-flex u-row-center fa-empty u-p-b-60" v-if="!hots.length">
					<image src="../../static/image/data.png" mode=""></image>
					<view class="u-tips-color">暂无更多的热门商品~</view>
				</view>
			</view>			
		</view>
		
    <view class="xinqu">
      <view class="u-flex u-row-between u-col-center u-m-b-38">
        <view class="u-font-32 text-weight">交流区</view>
        <!-- <view clcik="goMore('/pages/goods/goods')" class="u-tips-color">更多 <u-icon name="arrow-right" color="#909399" size="28"></u-icon></view> -->
        <!-- <navigator url="/pages/goods/goods" open-type="switchTab" class="more">查看更多 <u-icon name="arrow-right" color=""></u-icon></navigator> -->
      </view>
      <view class="friendList">
        <view v-for="item in friendList" @click="join(item)" class="item u-flex u-col-center u-row-between">
          <view class="img">
            <image :src="item.image" mode="aspectFit" class="image"></image>
          </view>
          <view class="div">
            <view class="name text-weight u-font-32">{{item.name}}</view>
            <view class="u-tips-color">欢迎加入{{item.name}}群！</view>
          </view>
          <!-- <u-icon name="plus" color="#333" size="40"></u-icon> -->
        </view>
      </view>
    </view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			status: 'loadmore',
			is_update: false,
			has_more: false,
			current: 0,
			scrollTop: 0,
			navigateList: [],
			hots: [],
			recommends: [],
      friendList:[]
		};
	},
	onShow() {
    this.getOnLoad()
	},
  
	computed: {
		notice() {
			let arr = [];
			if (this.vuex_config.notice) {
				this.vuex_config.notice.map(item => {
					arr.push(item.title);
				});
			}
			return arr;
		},
		navigates() {
			if (this.vuex_config.navigate) {
				let arr1 = [],
					arr2 = [];
				this.vuex_config.navigate.forEach((item, index) => {
					if (((index + 1) % 9 == 0 && index != 0) || index + 1 == this.vuex_config.navigate.length) {
						arr2.push(item);
						arr1.push(arr2);
						arr2 = [];
					} else {
						arr2.push(item);
					}
				});
				this.navigateList = arr1;
			}
			return 1;
		}
	},
	methods: {
    getOnLoad(){
      // uni.setStorageSync('token',this.vuex_token)
      console.log('uni ===', this.vuex_token)
      this.getGoodsIndex();
      this.$api.getTopUpApi({}).then(res=>{
        console.log('res---', res)
        if(res.code === 1){
          this.friendList = res.data.data
        }
      })
    },
    goMore(e){
      console.log('afaf', e)
      uni.switchTab({
        url:e
      })
    },
    join(e){
      uni.navigateTo({
        url:'/pages/index/talkDetail?id='+e.id
      })
    },
		change(e) {
			this.current = e.detail.current;
		},
		grids(e) {
			let path = e.path;
			if (path == '/' || !path) {
				return;
			}
			if (path.substr(0, 1) == 'p') {
				path = '/' + path;
			}
			if (path.includes('http')) {
				this.$u.vuex('vuex_webs', {
					path: e.path,
					title: e.name
				});
				this.$u.route('/pages/webview/webview');
				return;
			}
      if (path === '/pages/goods/goods') {
        uni.switchTab({
          url: path
        })
        return
      }
			this.$u.route(path);
		},
		openPage(index) {
			this.grids({
				path: this.vuex_config.swiper[index].url,
				name: this.vuex_config.swiper[index].title
			});
		},
		click(index) {
			if (this.vuex_config.notice) {
				let url = this.vuex_config.notice[index].path;
				if (url) {
					this.grids({
						path: url,
						name: this.vuex_config.notice[index].title
					});
				}
			}
		},
		getGoodsIndex() {
			this.$api.getGoodsIndex().then(({code,data:res,msg}) => {
				if (code) {
          if(res.hots.length > 4){
            this.hots = [res.hots[0], res.hots[1], res.hots[2], res.hots[3]];
          }else{
            this.hots = res.hots;
          }
					
					this.recommends = res.recommends;
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// //下拉刷新
 //  onPullDownRefresh() {
 //    this.getOnLoad()
 //    uni.startPullDownRefresh({
 //        success() {
          
 //        },
 //        complete() {
 //            uni.stopPullDownRefresh()
 //        }
 //    });
 //  },

	onReachBottom() {}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>
.friendList{
  .img{width: 140rpx; height: 140rpx; margin-right: 24rpx;}
  .image{width: 100%; height: 100%; display: block;}
  .name{margin-bottom: 34rpx;}
  .div{margin-right: 24rpx; flex: 1; width: 100%;}
  .item{margin-bottom: 40rpx;}
}
/deep/.uni-input-placeholder{background-color: #fff;}
/deep/.content-box{justify-content: flex-start;}
/deep/ .u-swiper-title{
  display: none;
}
.xinqu{padding: 40rpx 32rpx;}
.indicator-dots {
	display: flex;
	justify-content: center;
	align-items: center;
}

.indicator-dots-item {
	background-color: $u-tips-color;
	height: 6px;
	width: 6px;
	border-radius: 10px;
	margin: 0 3px;
}

.indicator-dots-active {
	background-color: $u-type-primary;
}
.notice {
	margin-bottom: 30rpx;
}
.index-content {
	margin-top: 30rpx;
	background-color: #ffffff;
	.title {
		position: relative;
		padding: 30rpx 50rpx;
		border-bottom: 1px solid #f4f6f8;
		.stroke {
			&::before {
				content: '';
				width: 8rpx;
				height: 30rpx;
				background-color: #374486;
				position: absolute;
				top: 36%;
				left: 30rpx;
				border-radius: 20rpx;
			}
		}
	}
}

.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30rpx;
	padding: 0 30rpx;
	.item {
		width: calc((100vw - 90rpx) / 2);
		background-color: #ffffff;
		box-shadow: 0px 0px 5px rgb(233, 235, 243);
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #e9ebf3;
		.name {
			min-height: 110rpx;
		}
		.foot {
			padding: 0 15rpx;
		}
		.images {
			width: 100%;
			height: 350rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.market_price {
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
}
.hots-list-box{
  width: 92%;margin: 0 auto;
  background: linear-gradient( 90deg, rgba(238, 240, 241, 0.63) 0%, rgba(225, 229, 230, 0.63) 100%);
  padding: 34rpx 26rpx 22rpx;
  border-radius: 16px;
  .z-title{
    display: flex;align-items: center; justify-content: space-between; margin-bottom: 38rpx;
    .le{font-size: 32rpx; font-weight: bold;}
    .more{color: rgba(23, 26, 29, 0.6);}
  }
}
.hots-list{
  display: flex; align-items: center;
	.item {
		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
     width: 24%; margin-right: 1%; text-align: center;
		.images {
			width: 140rpx;
			height: 140rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; margin:0 auto 18rpx;
      
			image {
				width: 100%;
				height: 100%;
			}
		}
    .price{color:#E50B0A; font-weight:bold; font-size:28rpx; line-height: 40rpx; height: 40rpx;}
    .name {
    	line-height: 40rpx; height: 40rpx; overflow: hidden; margin-bottom: 10rpx;
    }
		.content{
			flex: 1;
      
			
			.foot {
				padding: 0 15rpx;
			}
			.market_price {
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
